<template>
    <el-table :data="data" v-if="refreshTable" border row-key="grammarId" 
            @expand-change="handleExpandChange"
            @row-click="handleRowClick"
            :expand-row-keys="expandRowKeys"
            style="width: 100%">
            <el-table-column type="expand" >
                <template slot-scope="props">
                    <div style="padding-left: 60px;">
                        <p style="font-size: 20px;font-weight: bold;">例句</p>
                        <ul>
                            <li v-for="item in props.row.grammarExamples" style="font-size: 18px;border:1px dashed grey;border-radius:8px;margin: 10px 0px;">
                                <div style="display: flex;align-items:center;justify-content:flex-start;padding:10px 10px 0px 10px;">
                                    <div style="width: 800px;">
                                        <span>日文例句:</span><span style="margin-left: 20px;">{{ item.contentR }}</span>
                                    </div>
                                    <audio :src="item.fileBytes" controls="controls" style="margin-left: 30px;"></audio>
                                </div>
                                <div style="margin: 5px 10px 10px 10px;">
                                    <span>中文解释:</span><span style="margin-left: 20px;">{{ item.contentZ }}</span>
                                </div> 
                            </li>
                        </ul>
                    </div>
                </template>
            </el-table-column>
        
            <el-table-column v-for="(item)  in dataTitle" :key="item.name" :prop="item.name" :label="item.title"
                :width="item.width" >
                <template slot-scope="props">
                    <span>{{ props.row[item.name] }}</span>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button @click.stop="update(scope.row)" type="text" size="small">
                        修改
                    </el-button>
                    <el-button @click.stop="del(scope.row)" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
</template>

<script>
    export default{
        props:{
            //渲染组件使用的数据集
            data: {
                type: Array,
                required: false,
            },
            /**
             * 数据表格式定义
             * title: 数据表格的标题
             * name:  后端返回要渲染的字段名称
             * width: 当前数据占用列的宽度
             */
            dataTitle: {
                type: Array,
                required: false,
                default: [{ title: "标题", name: "field", width: "180" }],
            },
        },
        data(){
            return {
                refreshTable: true,
                expandRowKeys:[]
            }
        },
        methods:{
            //处理数据树是否折叠
            handlerExpand() {
                this.refreshTable = false;
                this.$nextTick(() => {
                    this.refreshTable = true;
                })
            },
            //修改语法
            update(row){
                this.$emit('update',row);
            },
            //删除语法
            del(row){
                this.$emit('delete',row)
            },
            //设置点击行打开扩展只打开一个扩展
            handleRowClick(row, column, event) {
                console.log(event)
                if(this.expandRowKeys.includes(row.grammarId)){
                    this.expandRowKeys = [];
                }else{
                    this.expandRowKeys = [row.grammarId]
                } 
            },
            //设置点击扩展箭头只打开一个扩展
            handleExpandChange(row, expandedRows) {
                console.log(row)
                if(this.expandRowKeys.includes(row.grammarId)){
                    this.expandRowKeys = [];
                }else{
                    this.expandRowKeys = [row.grammarId]
                }
            }
        },
        computed: {
            executeIsExpandAll() {
                this.handlerExpand();
                return this.isExpandAll;
            },
            

        },
    }
</script>

<style lang="scss" scoped>
    .el-table {
        margin-top: 18px;
    }
</style>